{{- define "main" -}}
{{ $experience := .Site.Data.experience }}
{{- $justify := false -}}
{{- if eq .Params.justify true -}} {{- $justify = true -}} {{- end -}}
<div class="article-container">
  <h1 class="article header title">{{- .Title | safeHTML -}}</h1>
  <article class="article markdown-body" {{- if $justify -}}style="text-align: justify;" {{- end -}}>
    <h2 class="heading">{{ $experience.title }}</h2>

    {{ range $index, $element := $experience.experience }}
    <div class="ExperienceContainer">
      <div class="DiamondSpinner"></div>
      <div class="DatesContainer">{{ $element.timeperiod }}</div>
      <div class="CompanyContainer">
        <div class="CompanyLogoContainer">
          <a href="{{$element.website}}"><img src="{{$element.logo}}" alt=""></a>
        </div>
        <h2>
          <a href={{$element.website}}> {{$element.company}}</a>
        </h2>
        <h3>{{$element.title}}</h3>
        <p class="">{{ $element.description }}</p>
      </div>
      <!-- <div class="timeline-item clearfix">
        <div class="timeline-icon"></div>
        <div class="timeline-content {{ if eq (mod $index 2) 0 }} right {{ end }}">
          <h6 class="h3 my-2">{{ $element.company }}</h6>
          <span class="date">{{ $element.timeperiod }}</span>
          {{ $website := $element.website }}
          {{ if $website }}
          <a target="_blank" href="{{ $website }}">
            <i class="fas fa-link"></i>
            {{ $website }}
          </a>
          {{ end }}
          <p class="">{{ $element.description }}</p>
        </div>
      </div> -->
    </div>

    {{ end }}
  </article>
</div>



{{- end -}}